<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>二维码登录</title>
</head>

<body>
  <img id="qrImg" />
  <div id="info" class="info"></div>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js
    "></script>
  <script>
    async function checkStatus(key) {
      const res = await axios({
        url: `/login/qr/check?key=${key}&timestamp=${Date.now()}`,
      })
      return res.data
    }
    async function getLoginStatus(cookie = '') {
      const res = await axios({
        url: `/login/status?timestamp=${Date.now()}`,
        method: 'post',
        data: {
          cookie,
        },
      })
      document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2)
    }
    async function login() {
      let timer
      let timestamp = Date.now()
      const cookie = localStorage.getItem('cookie')
      getLoginStatus(cookie)
      const res = await axios({
        url: `/login/qr/key?timestamp=${Date.now()}`,
      })
      const key = res.data.data.unikey
      const res2 = await axios({
        url: `/login/qr/create?key=${key}&qrimg=true&timestamp=${Date.now()}`,
      })
      document.querySelector('#qrImg').src = res2.data.data.qrimg

      timer = setInterval(async () => {
        const statusRes = await checkStatus(key)
        if (statusRes.code === 800) {
          alert('二维码已过期,请重新获取')
          clearInterval(timer)
        }
        if (statusRes.code === 803) {
          // 这一步会返回cookie
          clearInterval(timer)
          alert('授权登录成功')
          await getLoginStatus(statusRes.cookie)
          localStorage.setItem('cookie', statusRes.cookie)
        }
      }, 3000)
    }
    login()
  </script>
  <style>
    .info {
      white-space: pre;
    }
  </style>
</body>

</html>
